<template>
	<view class="address">
		<!-- <u-input class="input" v-model="address" :disabled="disabled" :border="true" type="select" @click="showPicker"
			placeholder="请选择区域" /> -->
			<!-- <view :style="{lineHeight: 1.5,color: address?'':'#c0c4cc'}" @click="showPicker">{{ address?address:"请选择" }}</view> -->
			<u--input v-model="address" @click.native="showPicker" disabled disabledColor="#ffffff" placeholder="请选择" border="none" />
		<!-- 地区区域 -->	
		<view class="picker-view" v-if="show">
			<view @click="cancel" :class="['cover-body',timeShow ? 'cover-body-show' : '']"></view>
			<view :class="['picker-container', timeShow ? 'drawer-content-visible' : '']">
				<view class="btns">
					<view class="btnt" @click="cancel">取消</view>
					<view class="btnt confirm" @click="comfimValue">确认</view>
				</view>
				<picker-view :value="initSelect" class="picker-view-list" @change="changeColumn">
					<picker-view-column>
						<view class="item" v-for="(item,index) in provinces" :key="index">
							<view class="item_info">
								{{item.value}}
							</view>
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in citys" :key="index">
							<view class="item_info">
								{{item.value}}
							</view>
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in area" :key="index">
							<view class="item_info">
								{{item.value}}
							</view>
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>
<script>
	import areas from '../../utils/pcaa.js';

	export default {
		name: "HAreaSelect",
		model: {
			prop: 'value',
			event: 'change',
		},
		props: {
			value: {
				type: [String, Number],
				default: '',
			},
			disabled: {
				type: Boolean,
				default: false
			},
		},
		
		data() {
			return {
				areas,
				address: "",
				show: false,
				timeShow: false,
				initSelect: [0, 0, 0],
				provinces: [],
				citys: [],
				area: [],
			};
		},
		watch: {
			value(newData){
				this.initData({area: newData});
			}
		},
		methods: {
			//展示多列选项
			showPicker() {
				if(this.disabled) return;
				const _this = this;
				this.show = true;
				setTimeout(() => {
					_this.timeShow = true;
				}, 0);
			},
			//取消
			cancel() {
				const _this = this;
				_this.timeShow = false;
				setTimeout(() => {
					_this.show = false;
				}, 300);
			},
			//列表项改变
			changeColumn(e){
				const val = e.detail.value;
				this.initSelect = val;
				//初始化数据
				const _citys = this.parseArr(this.areas[this.provinces[val[0]].key]);
				const _area = this.parseArr(this.areas[_citys[val[1]].key]);
				this.citys = _citys;
				this.area = _area;
			},
			//确定
			comfimValue(){
				
				const _adminArea = this.area[this.initSelect[2]].key;
				this.address = `${this.provinces[this.initSelect[0]].value}/${this.citys[this.initSelect[1]].value}/${this.area[this.initSelect[2]].value}`
				this.$emit('change',_adminArea);
				this.cancel();
			},
			initData({province = '', city = '', area  = ''}){
				if(area != "" && area != null){
					//区
					Object.keys(this.areas).map((item,index) => {
						Object.keys(this.areas[item]).map((items,indexs) => {
							if(items == area){
								city = item;
								this.initSelect[2] = indexs;
							}
						})
					})
					//市
					Object.keys(this.areas).map((item,index) => {
						Object.keys(this.areas[item]).map((items,indexs) => {
							if(items == city){
								province = item;
								this.initSelect[1] = indexs;
							}
						})
					})
					//省
					Object.keys(this.areas).map((item,index) => {
						Object.keys(this.areas[item]).map((items,indexs) => {
							if(items == province){
								this.initSelect[0] = indexs;
							}
						})
					})
					this.citys = this.parseArr(this.areas[province]);
					this.area = this.parseArr(this.areas[city]);
					this.address = `${this.provinces[this.initSelect[0]].value}/${this.citys[this.initSelect[1]].value}/${this.area[this.initSelect[2]].value}`
				}
				else{
					province = this.provinces[0].key;
					city = this.parseArr(this.areas[province])[0].key;
					area = this.parseArr(this.areas[city])[0].key;
					this.citys = this.parseArr(this.areas[province]);
					this.area = this.parseArr(this.areas[city]);
				}
			},
			parseArr(obj) {
				let _arr = [];
				for (var i in obj) {
					let _obj = {};
					_obj.key = i;
					_obj.value = obj[i];
					_arr.push(_obj);
				}
				return _arr
			},
		},
		mounted() {
			//初始化数据
			this.provinces = this.parseArr(this.areas['86']);
			this.initData({area: this.value});
		},
	}
</script>
<style lang="scss" scoped>
	.address {
		display: flex;
		flex-direction: column;
		width: 100%;

		.input {
			width: 100%;
		}
		
		.picker-view {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10074;
		
			.cover-body {
				position: fixed;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				background-color: rgba(0, 0, 0, 0.6);
				opacity: 0;
				transform: scale(1.2, 1.2);
				transition: all 0.3s ease-in-out 0s;
			}
		
			.cover-body-show {
				opacity: 1;
				transform: scale(1, 1);
			}
		
			.picker-container {
				width: 100%;
				height: 590rpx;
				position: absolute;
				left: 0;
				bottom: 0;
				background: #FFFFFF;
				transform: translate3d(0px, 100%, 0px);
				transition: all 0.3s linear;
		
				.btns {
					width: 100%;
					height: 90rpx;
					border-bottom: 1rpx solid #e5e5e5;
					display: flex;
					justify-content: space-between;
		
					.btnt {
						width: 160rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
		
					.confirm {
						color: #2979ff;
					}
				}
			}
		
			.picker-view-list {
				width: 100%;
				height: 500rpx;
		
				.item {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap;
					font-size: 14px;
					.item_info {
						display: flex;
						align-items: center;
						justify-content: center;
						flex: 1;
					}
				}
			}
		
			.drawer-content-visible {
				transform: translate3D(0px, 0px, 0px) !important;
			}
		}
	}
</style>
